<template>
  <div class="wrapper">
    <div class="account">
      <div class="account-inner">
        <div class="logo">
          <img id="logo-img" :src="logo" ref="logoImg" />
        </div>
        <div class="form">
          <div class="form-inner">
            <div>
              <div class="nav">
                <router-link
                  v-show="!isPassword"
                  to="/login"
                  v-text="isupdatePwd ? $t('pro.loginReg.passwordReturn') : $t('pro.loginReg.loginname')"
                ></router-link>
                <router-link
                  v-show="!isPassword && isRegister"
                  :class="{'register': true, 'register-1': isRegister2 }"
                  to="/register"
                  v-text="$t('pro.loginReg.regname')"
                ></router-link>
                <router-link
                  v-if="isPassword"
                  :to="'/password/'+pwdToKen"
                  v-text="$t('pro.loginReg.passwordUpdate')"
                ></router-link>
              </div>
              <!-- 登录注册路由出口 :include="['login']"-->
              <keep-alive :include="['login']">
                <router-view
                  :isupdatePwd="isupdatePwd"
                  @judgeTokenURL="judgeToken"
                  @updatePwd="updatePwd"
                ></router-view>
              </keep-alive>

              <!-- 底部组件 -->
              <v-copyright></v-copyright>
            </div>
          </div>
        </div>
      </div>
      <div class="swidth-lans">
        <a-dropdown>
          <a-menu slot="overlay" @click="langsClick">
            <a-menu-item key="en">English</a-menu-item>
            <a-menu-item key="cn">中文(简体)</a-menu-item>
            <a-menu-item key="cn_TW">中文(繁體)</a-menu-item>
          </a-menu>
          <a-icon type="setting" style="font-size: 2rem;color: #fff" />
        </a-dropdown>
      </div>
    </div>
  </div>
</template>

<script>
import { getIsRegister } from "../../api/login";
import time from "../../config/time";
import vCopyright from "@/components/common/Copyright";

export default {
  components: {
    vCopyright
  },
  inject: ["reload"],
  data() {
    return {
      isPassword: false,
      isRegister: false,
      isRegister2: false,
      pwdToKen: "",
      logo: "",
      isupdatePwd: false,
      t: null
    };
  },
  watch: {
    pwdToKen(val) {
      this.pwdToKen = val;
    }
  },
  methods: {
    langsClick(e) {
      this.reload();
      this.$i18n.locale = e.key;
      this.$store.commit("changeLocale", e.key);
    },

    judgeToken(config) {
      this.pwdToKen = config.pwdToKen;
      this.isPassword = config.show;
    },

    updatePwd(faly) {
      this.isupdatePwd = faly;
    },

    updatePro() {
      this.$store.dispatch("GetCompanyStyle").then(resDate => {
        let res = resDate.data || {};
        //this.$refs.logoImg.setAttribute("src", res.logo || "");
        document
          .querySelector("#app #logo-img")
          .setAttribute("src", res.logo || "");
        document
          .querySelector('link[rel="icon"]')
          .setAttribute("href", res.favicon || "");
        document.title = `${res.companyName}`;
      });
    }
  },
  computed: {
    companyInfo() {
      return this.$store.state.user.companyInfo;
    }
  },
  created() {
    getIsRegister().then(res => {
      let { data, code } = res.data || false;

      if (code == 200 && data) {
        localStorage.REGISTER = data;
        setTimeout(() => {
          this.isRegister = data;
        }, 1);
        //简单处理异步问题
        setTimeout(() => {
          this.isRegister2 = true;
        }, 100);
      }
    });
  },
  mounted() {
    this.updatePro();
    this.t = setInterval(() => {
      this.updatePro();
    }, time.loginStyleTime); //半分钟
  },
  destroyed() {
    clearInterval(this.t);
  }
};
</script>

<style lang="less">
@media (max-width: 575px) {
  .ant-form-item-label,
  .ant-form-item-control-wrapper {
    display: block;
    width: 100%;
  }
}
</style>

<style lang="less" scoped>
.register {
  margin-left: -350px;
  transition-property: margin-left;
  transition-duration: 1s;
  /* Firefox 4 */
  -moz-transition-property: margin-left;
  -moz-transition-duration: 1s;
  /* Safari and Chrome */
  -webkit-transition-property: margin-left;
  -webkit-transition-duration: 1s;
  /* Opera */
  -o-transition-property: margin-left;
  -o-transition-duration: 1s;
}
.register-1 {
  margin-left: 0;
}

.wrapper {
  min-height: 100vh;
  /*background-color: #1abc9c;*/
  padding-bottom: 20px;
  background: #5dd5c8
    url(https://static.zhipin.com/zhipin/v172/web/geek/images/newbg.png) center
    bottom no-repeat;
}
.account {
  padding-top: 5%;
  position: relative;
}

/*黑色主题时候*/
#app.dark .wrapper .account {
  color: rgba(0, 0, 0, 0.65);
  .nav > a.active {
    color: #1da57a;
  }
  .nav > a:not(.active) {
    color: #888;
  }
  .ant-select {
    color: rgba(0, 0, 0, 0.25);
    background-color: #722ed1 !important;
  }
  .ant-select-selection {
    color: #edeff1 !important;
  }
  .ant-input {
    background-color: #fff;
    color: #666 !important;
  }
  .nav > a::after {
    background-color: #1da57a;
  }
}

@media screen and (max-width: 768px) {
  .account.grid {
    display: block;
  }
}
.account-inner {
  width: 400px;
  margin-left: auto;
  margin-right: auto;
}
@media screen and (max-width: 768px) {
  .account-inner {
    width: 90%;
  }
}
.logo {
  img {
    display: block;
    margin-left: auto;
    margin-right: auto;
    width: 100%;
  }
}
.swidth-lans {
  position: absolute;
  right: 1.2rem;
  top: 1.2rem;
  width: 30px;
  height: 30px;
}

.form {
  background-color: #edeff1;
  padding: 24px 24px 20px;
  border-radius: 4px;
  margin-top: 7px;
  // width: 359px;
}
.nav {
  margin-bottom: 10px;
  justify-content: space-around;
  > a::after {
    margin-top: 10px;
  }
  > a {
    font-weight: bold;
  }
}
</style>
